<template>
  <div class="app-container">

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>服务单信息</span>
      </div>
      <el-form ref="orderInfo" label-width="100px" disabled>
        <el-form-item label="服务单号">
          <el-col :span="6" >
            <el-input v-model="orderInfo.serviceNo" />
          </el-col>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-col :span="6" >
            <el-input v-model="orderInfo.orderNo" />
          </el-col>
        </el-form-item>
        <el-form-item label="售后状态">
          <el-col :span="6" >
            <el-input v-model="orderInfo.serviceStatus" />
          </el-col>
        </el-form-item>
        <el-form-item label="售后类型">
          <el-col :span="6" >
            <el-input v-model="orderInfo.serviceType" />
          </el-col>
        </el-form-item>
        <el-form-item label="申请原因">
          <el-col :span="12" >
            <el-input v-model="orderInfo.applyReason" />
          </el-col>
        </el-form-item>
        <el-form-item label="申请描述">
          <el-col :span="12" >
            <el-input v-model="orderInfo.applyContent" type="textarea" />
          </el-col>
        </el-form-item>
        <el-form-item label="备注">
          <el-col :span="12" >
            <el-input v-model="orderInfo.remark" type="textarea" />
          </el-col>
        </el-form-item>
        <div style="height: 50px">
        </div>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品明细</span>
      </div>
      <el-table :data="orderInfo.itemList">
        <el-table-column prop="itemId" label="商品ID" />
        <el-table-column prop="skuId" label="skuId" />
        <el-table-column label="商品图片" align="center" prop="itemPic" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <img :src="scope.row.itemPic"  width="60" height="60" />
          </template>
        </el-table-column>
        <el-table-column prop="itemName" label="商品名称" />
        <el-table-column prop="itemSpec" label="规格" />
        <el-table-column prop="applyNum" label="售后数量" />
        <el-table-column prop="unitPrice" label="单价" />
        <el-table-column prop="payAmount" label="支付金额" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
  import { getService } from "@/api/order/service";

  export default {
    name: "ServiceInfo",
    data() {
      return {
        // 遮罩层
        loading: true,
        serviceStatusOptions:[],
        serviceTypeOptions:[],
        orderInfo: {
          itemList: []
        }
      };
    },
    created() {
      const serviceNo = this.$route.query && this.$route.query.serviceNo;
      if (serviceNo) {
        this.getOrder(serviceNo);
      }
    },
    methods: {
      getOrder(serviceNo) {
        getService(serviceNo).then(res => {
          this.orderInfo = {
            serviceNo: res.data.serviceNo,
            orderNo: res.data.orderNo,
            applyReason: res.data.applyReason,
            applyContent: res.data.applyContent,
            remark: res.data.remark,
            applyTime: res.data.applyTime,
            serviceStatus: res.data.serviceStatus,
            serviceType: res.data.serviceType,
            itemList: [
              {
                itemId: res.data.itemId,
                skuId: res.data.skuId,
                itemName: res.data.itemName,
                itemSpec: res.data.itemSpec,
                itemPic: res.data.itemPic,
                applyNum: res.data.applyNum,
                unitPrice: res.data.unitPrice,
                payAmount: res.data.payAmount,
              }
            ]
          }
          this.getOptions("service-status").then(res => {
            this.orderInfo.serviceStatus = this.selectOptionValue(res.data.options, this.orderInfo.serviceStatus);
          });
          this.getOptions("service-type").then(res => {
            this.orderInfo.serviceType = this.selectOptionValue(res.data.options, this.orderInfo.serviceType );
          });
        });
      }
    }
  }
</script>

<style>
  .el-card {
    margin-bottom: 10px;
  }
</style>
